  <script setup lang="ts">
  import { computed, ref, watch } from 'vue';
  import { useBoolean } from '@sa/hooks';
  import { useForm, useFormRules } from '@/hooks/common/form';
  import { $t } from '@/locales';
  import { enableStatusOptions } from '@/constants/business';
  import MenuAuthModal from './menu-auth-modal.vue';
  import ButtonAuthModal from './button-auth-modal.vue';
  import { fetchGetRoleInsert } from '@/service/api/system-manage';


  defineOptions({ name: 'RoleOperateDrawer' });

  interface Props {
    /** the type of operation */
    operateType: UI.TableOperateType;
    /** the edit row data */
    rowData?: Api.SystemManage.Role | null;
  }

  const props = defineProps<Props>();

  interface Emits {
    (e: 'submitted'): void;
  }

  const emit = defineEmits<Emits>();

  const visible = defineModel<boolean>('visible', {
    default: false
  });

  const { formRef, validate, restoreValidation } = useForm();
  const { defaultRequiredRule } = useFormRules();
  const { bool: menuAuthVisible, setTrue: openMenuAuthModal } = useBoolean();
  const { bool: buttonAuthVisible, setTrue: openButtonAuthModal } = useBoolean();

  const title = computed(() => {
    const titles: Record<UI.TableOperateType, string> = {
      add: $t('page.manage.role.addRole'),
      edit: $t('page.manage.role.editRole')
    };
    return titles[props.operateType];
  });

  type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'status'>;

  const model = ref(createDefaultModel());

  function createDefaultModel(): Model {
    return {
      roleName: '',
      roleCode: '',
      roleDesc: '',
      status: undefined
    };
  }

  type RuleKey = Exclude<keyof Model, 'roleDesc'>;

  const rules: Record<RuleKey, App.Global.FormRule> = {
    roleName: defaultRequiredRule,
    roleCode: defaultRequiredRule,
    status: defaultRequiredRule
  };

  const roleId = computed(() => props.rowData?.id || -1);

  const isEdit = computed(() => props.operateType === 'edit');

  function handleInitModel() {
    model.value = createDefaultModel();

    if (props.operateType === 'edit' && props.rowData) {
      Object.assign(model.value, props.rowData);
    }
  }

  function closeDrawer() {
    visible.value = false;
  }

  async function handleSubmit() {
    try {
     await validate(); // 执行Element Plus表单验证
     
     // 构建提交参数（根据API文档定义）
     const params = {
       ...model.value,
       id: isEdit.value ? roleId.value : undefined
     };
     console.log(params);
     // 调用服务层API
     await fetchGetRoleInsert(params);
     
     // 成功处理
     window.$message?.success($t('common.updateSuccess'));
     closeDrawer();
     emit('submitted'); // 触发父组件更新
   } catch (error) {
     console.error('提交失败:', error);
     // FIXME: 需要添加更详细的错误处理逻辑
   }
  }

  watch(visible, () => {
    if (visible.value) {
      handleInitModel();
      restoreValidation();
    }
  });
  </script>

  <template>
    <ElDrawer v-model="visible" :title="title" :size="360">
      <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
        <ElFormItem :label="$t('page.manage.role.roleName')" prop="roleName">
          <ElInput v-model="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.manage.role.roleCode')" prop="roleCode">
          <ElInput v-model="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.manage.role.roleStatus')" prop="status">
          <ElRadioGroup v-model="model.status">
            <ElRadio v-for="{ label, value } in enableStatusOptions" :key="value" :value="value" :label="$t(label)" />
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem :label="$t('page.manage.role.roleDesc')" prop="roleDesc">
          <ElInput v-model="model.roleDesc" :placeholder="$t('page.manage.role.form.roleDesc')" />
        </ElFormItem>
      </ElForm>
      <ElSpace v-if="isEdit">
        <ElButton @click="openMenuAuthModal">{{ $t('page.manage.role.menuAuth') }}</ElButton>
        <MenuAuthModal v-model:visible="menuAuthVisible" :role-id="roleId" />
        <ElButton @click="openButtonAuthModal">{{ $t('page.manage.role.buttonAuth') }}</ElButton>
        <ButtonAuthModal v-model:visible="buttonAuthVisible" :role-id="roleId" />
      </ElSpace>
      <template #footer>
        <ElSpace :size="16">
          <ElButton @click="closeDrawer">{{ $t('common.cancel') }}</ElButton>
          <ElButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</ElButton>
        </ElSpace>
      </template>
    </ElDrawer>
  </template>

  <style scoped></style>
